<template>
  <Tab @goBack="goBack" :tabs="tabs" :current="current">
    <div slot="index">
      <el-row :gutter="20">
        <!--<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="5">
          <el-card class="box-card">
            <div>对公帐户</div>
            <div style="margin-top: 20px;">&nbsp;</div>
            <div style="margin-top: 20px;">
              &lt;!&ndash;<el-button>转出</el-button><el-button>转入</el-button><el-button>交易记录</el-button>&ndash;&gt;
              <el-button @click="transferMoney('recharge')">转出</el-button>
              <el-button @click="transferMoney('take')">转入</el-button>
              <el-button @click="handleCurrent('publicAccounts')">交易记录</el-button>
            </div>
          </el-card>
        </el-col>-->
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-card class="box-card">
            <div>普通资金帐户</div>
            <div style="margin-top: 20px;">￥{{data.common.bal}}</div>
            <div style="margin-top: 20px;">
              <el-button @click="transferMoney('commonTake')">转出</el-button>
              <el-button @click="transferMoney('commonRecharge')">转入</el-button>
              <el-button @click="handleCurrent('commonFund')">交易记录</el-button>
            </div>
          </el-card>
        </el-col>

        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-card class="box-card" style="margin-top: 20px;">
            <div>营销帐户</div>
            <div style="margin-top: 20px;">￥{{data.market.bal}}</div>
            <div style="margin-top: 20px;">
              <!--<el-button>转出</el-button><el-button>转入</el-button><el-button>交易记录</el-button>-->
              <el-button @click="transferMoney('marketRecharge')">转出</el-button>
              <el-button @click="transferMoney('marketTake')">转入</el-button>
              <el-button @click="handleCurrent('marketingAccount')">交易记录</el-button>
            </div>
          </el-card>
        </el-col>
        <!--<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="5">
          <el-card class="box-card">
            <div>待清算帐户</div>
            <div style="margin-top: 20px;">￥{{data.wait.bal}}</div>
            <div style="margin-top: 20px;">
              <el-button @click="handleCurrent('pendingAccount')">交易记录</el-button>
            </div>
          </el-card>
        </el-col>-->
      </el-row>

      <el-row :gutter="20" style="padding-top: 20px;">

        <!--<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="5">
          <el-card class="box-card">
            <div>平台退款帐户</div>
            <div style="margin-top: 20px;">&nbsp;</div>
            <div style="margin-top: 20px;">
              <el-button>交易记录</el-button>
            </div>
          </el-card>
        </el-col>-->
        <!--<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="5">
          <el-card class="box-card">
            <div>预付款资金帐户</div>
            <div style="margin-top: 20px;">&nbsp;</div>
            <div style="margin-top: 20px;">
              <el-button @click="handleCurrent('prepaymentAccount')">交易记录</el-button>
            </div>
          </el-card>
        </el-col>-->
      </el-row>

     <!-- <el-row :gutter="20" style="padding-top: 20px;">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="5">
          <el-card class="box-card">
            <div>交易手续费资金帐户</div>
            <div style="margin-top: 20px;">￥{{data.transaction.bal}}</div>
            <div style="margin-top: 20px;">
              <el-button @click="handleCurrent('transactionAccount')">交易记录</el-button>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="5">
          <el-card class="box-card">
            <div>提现手续费资金帐户</div>
            <div style="margin-top: 20px;">￥{{data.take.bal}}</div>
            <div style="margin-top: 20px;">
              <el-button @click="handleCurrent('takeAccount')">交易记录</el-button>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="5">
          <el-card class="box-card">
            <div>鉴权资金帐户</div>
            <div style="margin-top: 20px;">&nbsp;</div>
            <div style="margin-top: 20px;">
              <el-button>交易记录</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>-->
      <!-- 添加或修改参数配置对话框
      <el-dialog :title="title" :visible.sync="open" width="600px" :close-on-click-modal="false">
        <el-form ref="form" :model="form" :rules="rules" label-width="150px">

          <el-form-item label="收款账户">
            <el-radio v-model="defaultRadio" label="1" border>{{accountsReceivable}}</el-radio>
          </el-form-item>

          <el-form-item label="转入金额(元)" prop="transAmt">
            <el-input-number v-model="form.transAmt" :precision="2" :step="100" :min="0"
                             :max="9999999"></el-input-number>
          </el-form-item>

          <el-form-item label="付款账户">
            <el-radio v-model="defaultRadio" label="1" border>{{paymentAccount}}</el-radio>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm" :disabled="disabled">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog> -->
    </div>
    <div slot="publicAccounts">
      <Public></Public>
    </div>
    <div slot="commonFund">
      <Common></Common>
    </div>
    <div slot="pendingAccount">
      <Pending></Pending>
    </div>
    <div slot="marketingAccount">
      <Market></Market>
    </div>
    <div slot="prepaymentAccount">
      <Prepayment></Prepayment>
    </div>
    <div slot="transactionAccount">
      <Transaction></Transaction>
    </div>
    <div slot="takeAccount">
      <Take></Take>
    </div>
    <div slot="platform">
      <Platform @goBack="goBack" :index="platformIndex" :commonFund="data.common.bal" :marketingFund="data.market.bal"></Platform>
    </div>


  </Tab>
</template>

<script>
  import {index, platformRecharge, platformTake, commonRecharge, commonTake} from "@/api/main/financial/fund";
  import Tab from "@/components/Tab";
  import Public from "./public";
  import Common from "./common";
  import Pending from "./pending";
  import Market from "./market";
  import Prepayment from "./prepayment";
  import Transaction from "./transaction";
  import Take from "./take";
  import Platform from "./platform";

  export default {
    components: {
      Tab,
      Public,
      Common,
      Pending,
      Market,
      Prepayment,
      Transaction,
      Take,
      Platform
    },
    data() {
      return {
        platformIndex: 1,
        accountsReceivable: undefined,
        paymentAccount: undefined,
        currentDialog: undefined,
        current: 'index',
        tabs: [
          {index: 'index', name: ''},
          {index: 'publicAccounts', name: '对公帐户记录'},
          {index: 'commonFund', name: '普通资金帐户记录'},
          {index: 'pendingAccount', name: '待清算帐户记录'},
          {index: 'marketingAccount', name: '营销帐户记录'},
          {index: 'prepaymentAccount', name: '预付款帐户记录'},
          {index: 'transactionAccount', name: '交易手续费记录'},
          {index: 'takeAccount', name: '提现手续费记录'},
          {index: 'platform', name: '账户转入'}
        ],
        disabled: false,
        data: {
          common: 0,
          transaction: 0,
          take: 0,
          market: 0,
          wait: 0
        },
        open: false,
        title: '',
        acctTypeArray: [{acctType: "02", name: 'transaction'}, {acctType: "03", name: 'take'}, {
          acctType: "04",
          name: 'market'
        }, {acctType: "11", name: 'wait'}],
        form: {
          transAmt: 0
        },
        rules: {
          transAmt: [
            {required: true}
          ],
        }
      }
    },
    created() {
      this.getList();
    },
    methods: {
      handleCurrent(str) {
        this.current = str;
      },
      updatedList(acctType, name) {
        index({acctType: acctType}).then(response => {
          this.data[name] = response.data;
        });
      },

      transferMoney(str) {
        switch (str) {
          case 'take':
            this.platformIndex = 1;
            this.$set(this.tabs, 8, {index: 'platform', name: '账户转入'});
            break;
          case 'recharge':
            this.platformIndex = 2;
            this.$set(this.tabs, 8, {index: 'platform', name: '账户转出'});
            break;
          case 'commonRecharge':
            this.platformIndex = 3;
            this.$set(this.tabs, 8, {index: 'platform', name: '账户转入'});
            break;
          case 'commonTake':
            this.platformIndex = 4;
            this.$set(this.tabs, 8, {index: 'platform', name: '账户转出'});
            break;
          case 'marketRecharge':
            this.platformIndex = 5;
            this.$set(this.tabs, 8, {index: 'platform', name: '账户转出'});
            break;
          case 'marketTake':
            this.platformIndex = 6;
            this.$set(this.tabs, 8, {index: 'platform', name: '账户转入'});
            break;
        }
        this.handleCurrent('platform')
      },

      handleOpen(str) {
        this.currentDialog = str;
        if (str === 'recharge') {
          this.title = '转出';
          this.accountsReceivable = '普通账户';
          this.paymentAccount = '一般对公账户';
        } else if (str === 'take') {
          this.title = '转入';
          this.accountsReceivable = '一般对公账户';
          this.paymentAccount = '普通账户';
        } else if (str === 'commonTake') {
          this.title = '转出';
        } else if (str === 'commonRecharge') {
          this.title = '转入';
          this.accountsReceivable = '营销账户';
          this.paymentAccount = '普通账户';
        }
        this.disabled = false;
        this.open = true;
      },
      submitForm() {
        let str = this.currentDialog;
        this.disabled = true;
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (str === 'recharge') {
              platformRecharge(this.form.transAmt).then(response => {
                this.disabled = false;
                if (response.code === 200) {
                  this.msgSuccess("转入成功");
                  this.open = false;
                  this.getList();
                  this.reset();
                } else {
                  this.msgError(response.msg);
                }
              });
            } else if (str === 'take') {
              platformTake(this.form.transAmt).then(response => {
                this.disabled = false;
                if (response.code === 200) {
                  this.msgSuccess("转出成功");
                  this.open = false;
                  this.getList();
                  this.reset();
                } else {
                  this.msgError(response.msg);
                }
              });
            } else if (str === 'commonTake') {
              commonTake(this.form.transAmt).then(response => {
                this.disabled = false;
                if (response.code === 200) {
                  this.msgSuccess("转出成功");
                  this.open = false;
                  this.getList();
                  this.reset();
                } else {
                  this.msgError(response.msg);
                }
              });
            } else if (str === 'commonRecharge') {
              commonRecharge(this.form.transAmt).then(response => {
                this.disabled = false;
                if (response.code === 200) {
                  this.msgSuccess("转入成功");
                  this.open = false;
                  this.getList();
                  this.reset();
                } else {
                  this.msgError(response.msg);
                }
              });
            }
          }
        });
      },
      cancel() {
        this.open = false;
        this.reset();
      },
      reset() {
        this.form = {
          transAmt: 0
        };
        this.resetForm("form");
      },
      getList() {
        const loading = this.$loading({
          lock: true,
          text: '加载数据中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.3)'
        });
        index({acctType: '01'}).then(response => {
          console.log(response);
          this.data.common = response.data;
          loading.close();
        });

        this.updatedList('02', 'transaction');
        this.updatedList('03', 'take');
        this.updatedList('04', 'market');
        this.updatedList('11', 'wait');
      },
      goBack(message) {
        console.log(message);
        console.log(message==='platformRefresh');
        this.current = 'index';
        if(message==='platformRefresh'){
          this.getList();
        }
      }
    },

  }
</script>



